<template>
    <div class="charts">
      <!-- vue-echarts提供全局组件 -->
      <v-chart :option="getOption()" autoresize></v-chart>
    </div>
  </template>
  
  <script setup lang="ts">
  //ehcarts配置项
  const getOption = () => {
    return {
      //x轴
      xAxis: {
        //x轴上均匀分布
        type: "category",
        show: false, //隐藏x
      },
      yAxis: {
        show: false, //隐藏y
      },
      series: {
        type: "bar",
        //每个柱状图颜色
        colorBy: "data",
        data: props.data,
        //显示数值
        label: {
          show: false,
          position: "insideTop",
          color: "white",
        },
        //延迟动画时间
        animationDelay: function (idx) {
          // 越往后的数据延迟越大
          return idx * 100;
        },
      },
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        show: true,
        //图标底层的颜色
        backgroundColor: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "yellow", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "skyblue", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      //提示组件
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
        position: function (point, params, dom, rect, size) {
          // 固定在顶部
          return [point[0], "5%"];
        },
      },
    };
  };
  
  //接受父组件传递过来props
  let props = defineProps(["data"]);
  </script>
  
  <style scoped>
  .charts {
    width: 100%;
    height: 100%;
  }
  </style>